<template>
    <div class="box" :style="{width:width,height:height}">
        <div class="ribbon"><span>POPULAR</span></div>
    </div>
</template>

<script>
    /**
     *@author ZY
     *@date 2022/11/17
     *@Description:色带
     */
    export default {
        name: "mg-ribbon",
        props: {
            title: {
                type: String,
                default() {
                    return 'POPULAR'
                }
            },
            width: {
                type: String,
                default() {
                    return '200px'
                }
            },
            height: {
                type: String,
                default() {
                    return '300px'
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    $color: $color-primary;
    .box {
        position: relative;
        border: 1px solid #BBB;
        background: #EEE;
    }

    .ribbon {
        position: absolute;
        right: -5px;
        top: -5px;
        z-index: 1;
        overflow: hidden;
        width: 75px;
        height: 75px;
        text-align: right;
    }

    .ribbon span {
        font-size: 10px;
        font-weight: bold;
        color: #FFF;
        text-transform: uppercase;
        text-align: center;
        line-height: 20px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        width: 100px;
        display: block;
        background: $color;
        background: linear-gradient($color 0%, $color 100%);
        box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
        position: absolute;
        top: 19px;
        right: -21px;
    }

    .ribbon span::before {
        content: "";
        position: absolute;
        left: 0px;
        top: 100%;
        z-index: -1;
        border-left: 3px solid $color;
        border-right: 3px solid transparent;
        border-bottom: 3px solid transparent;
        border-top: 3px solid $color;
    }

    .ribbon span::after {
        content: "";
        position: absolute;
        right: 0px;
        top: 100%;
        z-index: -1;
        border-left: 3px solid transparent;
        border-right: 3px solid $color;
        border-bottom: 3px solid transparent;
        border-top: 3px solid $color;
    }
</style>
